<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>sama赞赏社</title>
    <link rel="stylesheet" href="/static/css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/post.css">
    <script src="/static/js/jquery-3.2.1.js"></script>
    <script src="/static/js/bootstrap/bootstrap.min.js"></script>
    <script src="/static/js/qiniu/plupload.full.min.js"></script>
</head>
<body>

<div class="container">
    <div class="row" style="border-bottom: 1px solid #eeeeee;">
        <a href="/index/Index/selectOpera" class="col-xs-2" style="margin-top: 5px;">
            <img src="/static/img/back.png" style="width: 25px;height: 25px;">
        </a>
        <h4 class="col-xs-10" style="text-align: center;padding-right: 5rem;">发帖</h4>
    </div>

    <div class="content">
        <form class="bs-example bs-example-form" role="form">
            <div class="message">

            </div>
            <div class="input-group" style="margin: 10px 0;">
                <span class="input-group-addon">( • ̀ω•́ )✧</span>
                <input type="text" name="title" id="title" class="form-control" placeholder="添加标题">
            </div>
            <div>
                <div class="textarea" name="content" id="content" contenteditable="true">
                    请输入展示内容
                </div>

                <div style="padding-bottom: 10px;">
                    <button id="addImg" class="btn btn-info" style="padding: 0;">添加图片</button>
                </div>
                <!--存放图片-->
                <div id="imgs" style="margin: 0 0 10px;" name="imgs"></div>
            </div>

        </form>

        <label>隐藏内容</label>
        <div class="textarea" id="hide_content" contenteditable="true">
            请输入隐藏内容
        </div>

        <div style="padding-bottom: 10px;">
            <button id="hideImg" class="btn btn-info" style="padding: 0 5px; width: auto;">添加隐藏图片</button>
        </div>
        <!--存放图片-->
        <div id="hide_imgs" name="hide_imgs" style="margin: 0 0 10px;"></div>

        <label>设置阅读解锁金额</label>
        <div id="maney" style="text-align: center;width: 100%;">
            <div class="btn-group btn-group-lg" style="margin-bottom: 5px;">
                <button type="button" class="etc btn btn-default" value="0.1" style="padding: 10px 0;">0.1元</button>
                <button type="button" class="etc btn btn-default" value="1.0" style="padding: 10px 0;">1.0元</button>
                <button type="button" class="etc btn btn-default" value="2.0" style="padding: 10px 0;">2.0元</button>
                <button type="button" class="etc btn btn-default" value="5.0" style="padding: 10px 0;">5.0元</button>
            </div>
            <div class="btn-group btn-group-lg">
                <button type="button" class="etc btn btn-default" value="10.0" style="padding: 10px 0;">10.0元</button>
                <button type="button" class="etc btn btn-default" value="15.0" style="padding: 10px 0;">15.0元</button>
                <button type="button" class="etc btn btn-default" value="20.0" style="padding: 10px 0;">20.0元</button>
                <input type="text" class="manys self-money" placeholder="自定义">
            </div>
        </div>


        <label style="color: #FFB0A9; margin: 10px 0;">发帖后你将不能对帖子再进行编辑</label>

        <button type="button" class="save btn btn-lg btn-block btn-info" style="margin-bottom: 20px;">发表</button>

    </div>
</div>


<script type="text/javascript">

    var imgs = '';
    var hide_imgs = '';
    var maney = $('#maney');

    // Custom example logic
    var uploader = new plupload.Uploader({
        runtimes: 'html5',
        browse_button: 'addImg', //触发文件选择对话框的按钮，为那个元素id
        url: 'http://up.qiniu.com/', //服务器端的上传页面地址
        flash_swf_url: '/static/js/qiniu/Moxie.swf',
        silverlight_xap_url: '/static/js/qiniu/Moxie.xap',
        filters: {
            // 设置大小
            max_file_size: '10mb',
            // 允许上传的类型
            mime_types: [
                // {title : "Image files", extensions : "png,jpeg,gif,bmp,jpg"},
            ]
        },
        multipart: true,
        //设置post传给七牛的token 设置的token 直接生成 设置时间为10年 计算方式为 Unix时间戳后面添加几个0 这样不需调用后端代码生成token 时间不宜过大过大会出问题
        multipart_params: {
            'token': 'saWbg0EFS4o0WBKBhMBXzweR3LnFJfH6aLy0i_pk:so3hTrgcMtWpSAKfMI-mQWooi_k=:eyJzY29wZSI6InFpYW5nIiwiZGVhZGxpbmUiOjE1MDc3MDg0NTcwMH0=',
        },
        //修改post字段为七牛的file
        file_data_name: 'file',
        init: {
            //初始化七牛
            PostInit: function () {

                document.getElementById('imgs').innerHTML = '';


            },
            //选择文件后会调用此函数
            FilesAdded: function (up, files) {
                //选择文件后直接上传， 或可改成点击按钮上传
                uploader.start();
            },
            //上传过程中的回调
            UploadProgress: function (up, file) {

            },
            //每一个文件上传成功后都会回调此函数，通过此函数像代码中添加img显示
            FileUploaded: function (up, file, info) {
                var res = info.response;
                console.log(res)
                var r = eval('(' + res + ')');
                console.log(r);
                document.getElementById('imgs').innerHTML += '<div class="upload-photo"> <img src="http://osigyjh92.bkt.clouddn.com/' + r.key + '"></div>';
                if(imgs == ""){
                    imgs += 'http://osigyjh92.bkt.clouddn.com/' + r.key + '';
                }else{
                    imgs += ',http://osigyjh92.bkt.clouddn.com/' + r.key + '';
                }
            },
            //上传结束后会调用此函数
            UploadComplete: function (up, files) {
                // Called when all files are either uploaded or failed
                // console.log('[完成]');
            },
            Error: function (up, err) {
                // alert(err.response);
            }
        }
    });


    var uploader2 = new plupload.Uploader({
        runtimes: 'html5',
        browse_button: 'hideImg', //触发文件选择对话框的按钮，为那个元素id
        url: 'http://up.qiniu.com/', //服务器端的上传页面地址
        flash_swf_url: '/static/js/qiniu/Moxie.swf',
        silverlight_xap_url: '/static/js/qiniu/Moxie.xap',
        filters: {
            // 设置大小
            max_file_size: '10mb',
            // 允许上传的类型
            mime_types: [
                // {title : "Image files", extensions : "png,jpeg,gif,bmp,jpg"},
            ]
        },
        multipart: true,
        //设置post传给七牛的token 设置的token 直接生成 设置时间为10年 计算方式为 Unix时间戳后面添加几个0 这样不需调用后端代码生成token 时间不宜过大过大会出问题
        multipart_params: {
            'token': 'saWbg0EFS4o0WBKBhMBXzweR3LnFJfH6aLy0i_pk:so3hTrgcMtWpSAKfMI-mQWooi_k=:eyJzY29wZSI6InFpYW5nIiwiZGVhZGxpbmUiOjE1MDc3MDg0NTcwMH0=',
        },
        //修改post字段为七牛的file
        file_data_name: 'file',
        init: {
            //初始化七牛
            PostInit: function () {

                document.getElementById('hide_imgs').innerHTML = '';

            },
            //选择文件后会调用此函数
            FilesAdded: function (up, files) {
                //选择文件后直接上传， 或可改成点击按钮上传
                uploader2.start();
            },
            //上传过程中的回调
            UploadProgress: function (up, file) {

            },
            //每一个文件上传成功后都会回调此函数，通过此函数像代码中添加img显示
            FileUploaded: function (up, file, info) {
                var res = info.response;
                console.log(res)
                var r = eval('(' + res + ')');
                console.log(r);
                document.getElementById('hide_imgs').innerHTML += '<div class="upload-photo"> <img src="http://osigyjh92.bkt.clouddn.com/' + r.key + '"></div>';
                if(hide_imgs == ""){
                    hide_imgs += 'http://osigyjh92.bkt.clouddn.com/' + r.key + '';
                }else{
                    hide_imgs += ',http://osigyjh92.bkt.clouddn.com/' + r.key + '';
                }
            },
            //上传结束后会调用此函数
            UploadComplete: function (up, files) {
                // Called when all files are either uploaded or failed
                // console.log('[完成]');
            },
            Error: function (up, err) {
                // alert(err.response);
            }
        }
    });

    //初始化整个upload
    uploader.init();
    uploader2.init();

    var price = '';

    maney.ready(function(){

        $('.etc ').click(function () {
            price = $(this).val();

        })
        $('.manys').bind(' input propertychange ',function(){
            price = $('.manys').val();

        });
    })


    $('.save').click(function () {
        var title = $('#title').val();
        var content = $('#content').html();
        var hide_content = $('#hide_content').html();
        $.ajax({
            url: '/index/Index/posts',
            type: 'post',
            data: {price: price,title:title,content:content,hide_content:hide_content,hide_imgs:hide_imgs,imgs:imgs},
            success: function (r) {
                if (r.code == 1) {
                    $('.message').html(r.msg);
                } else {
                    $('#title').val('');
                    $('#content').html('');
                    $('#hide_content').html('');
                    document.getElementById('hide_imgs').innerHTML = '';
                    document.getElementById('imgs').innerHTML = '';
                    price = 0;
                    $('.message').html(r.msg);
                }
            }
        })
    })


</script>

</body>

</html>